<template>
  <div class="mainPart">
     <!-- 主要内容导航 -->
    <div class="title headTitle">WE OFFER INTEGRATED DESIGN SERVICE</div>
    <div class="content1">
      <div>
        <img src="@/assets/images/main/3.png" alt />
        <p>GRAPHIC DESIGN</p>
        <p>POSTER DESIGN</p>
        <p>VISUAL IDENTITY</p>
        <p>PRODUCT PACKAGING</p>
      </div>
      <div>
        <img src="@/assets/images/main/2.png" alt />
        <p>THREE-DIMENSIONAL DESIGN</p>
        <p>PRODUCT DESIGN</p>
        <p>3D MODELING</p>
      </div>
      <div>
        <img src="@/assets/images/main/4.png" alt />
        <p>POST-PRODUCTION</p>
        <p>VIDEO EDITING</p>
        <p>VIDEO EFFECT</p>
      </div>
      <div>
        <img src="@/assets/images/main/5.png" alt />
        <p>ANIMATION PRODUCTION</p>
        <p>FLASH ANIMATION</p>
        <p>MOTION GRAPHICS</p>
      </div>
      <div>
        <img src="@/assets/images/main/6.png" alt />
        <p>PROMOTION PLAN</p>
        <p>MARKETINGG PROGGRAM</p>
        <p>EVENT PLANNING</p>
      </div>
    </div>
     <!-- 第1部分 海报-->
    <div class="title subTitle">
      <span>GRAPHIC DESIGN</span>
    </div>
    <div class="content2">
      <div>
        <img src="@/assets/images/main/7.jpg" alt />
        <p>ADVERTISING POSTER</p>
        <p
          class="text"
        >Our company has powerful ability to offer varies kinds of poster design services. We pay great attention to union of fashion and practicability.</p>
      </div>
      <div>
        <p>USER INTERFACE</p>
        <p
          class="text"
        >Design UI with cuttingedge fashion style, bring a fantastic visual experience for you and users.</p>
        <img src="@/assets/images/main/8.jpg" alt />
      </div>
      <div>
        <img src="@/assets/images/main/9.jpg" alt />
        <p>PRODUCT PACKAGING</p>
        <p
          class="text"
        >Combining Chinese and English culture and style, make uniqe visual exprience for product packaging。</p>
      </div>
      <div>
        <p>VISUAL IDENTITY</p>
        <p
          class="text"
        >Proficient in the use of minimalist fashion style, to provide you with a comprehensive, professional and special design service.</p>
        <img src="@/assets/images/main/10.jpg" alt />
      </div>
    </div>
     <!-- 第2部分 建模-->
    <div class="title subTitle">
      <span>THREE-DIMENSIONAL DESIGN</span>
    </div>
    <div class="content3">
      <div>
        <img src="@/assets/images/main/11.png" />
        <p class="title">Product Modeling</p>
        <p
          class="text"
        >We have a wealth of modeling project experience and skilled productt modeling techiques.</p>
      </div>
      <div>
        <div>
          <img src="@/assets/images/main/12.jpg" />
          <div>
            <p class="title">Buliding Modeiling</p>
            <p class="text">Accurate modeling of the house using engineering drawings.</p>
          </div>
        </div>
        <div>
          <img src="@/assets/images/main/13.png" />
        </div>
      </div>
      <div>
        <img src="@/assets/images/main/14.jpg" />
        <p class="title">3D Rendering Scene</p>
        <p
          class="text"
        >Produce a realistic, exquisite rendering effect to satisfy your requirements for 3D effect drawing.</p>
      </div>
    </div>
     <!-- 第3部分 视频-->
    <div class="title subTitle">
      <span>POST-EDITITG/POST-PRODUCTION</span>
    </div>
    <div class="content4">
      <div>
        <img src="@/assets/images/main/15.jpg" />
        <p>TISSOT Limited-Edition Theme Store</p>
        <p>-A stylized award video-</p>
      </div>
      <div>
        <img src="@/assets/images/main/16.jpg" />
        <p>Shanghai Internaitional Advertising Festival</p>
        <p>-Promotion video for the event-</p>
      </div>
      <div>
        <img src="@/assets/images/main/17.jpg" />
        <p>Maetro, The Hairstylist of Everyone</p>
        <p>-A stylized award video-</p>
      </div>
      <div>
        <img src="@/assets/images/main/18.jpg" />
        <p>Construction of Smart Court Project</p>
        <p>-Prmotion video for Anchor-</p>
      </div>
    </div>
    <!-- 第4部分 动画封面-->
    <div class="title subTitle">
      <span>ANIMATION PRODUCTION</span>
    </div>
    <div class="content5">
      <div>
        <img src="@/assets/images/main/19.jpg" />
      </div>
      <div>
        <img src="@/assets/images/main/20.jpg" />
      </div>
      <div class="floatDiv">
          <p>2D/3D animated ADVERTISEMENTS</p>
          <p>The company has an excellent producton team to provide two-dimensional animated ads and three-dimentional animated ads services.</p>
          <span>MORE</span>
          <div></div>
      </div>
    </div>

    <!-- 第5部分 策划封面 -->
    <div class="title subTitle">
      <span>MARKETNG PLANNING</span>
    </div>
    <div class="content6">
      <div class="one">
        <img src="@/assets/images/main/21.jpg" alt />
      </div>
      <div class="one">
        <div class="two">
          <img src="@/assets/images/main/22.jpg" alt />
        </div>
        <div class="two position">
          <div class="three">
            <img src="@/assets/images/main/23.jpg" alt />
          </div>
          <div class="three">
            <img src="@/assets/images/main/24.jpg" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainPart",
  data() {
    return {};
  }
};
</script> 

<style lang="less">
.mainPart {
  background: #fff;
  height: auto;
  p {
    margin-block-start: 0;
    margin-block-end: 0;
  }
  .title {
    text-align: center;
  }

  .headTitle {
    line-height: 120px;
    font-size: 32px;
  }

  .content1 {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0;
    box-sizing: border-box;
    box-shadow: 0 0 5px #555;
    border: 1px solid #555;
    div {
      width: 19%;
      text-align: center;
      padding-bottom: 5px;
      img {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        display: block;
      }
      p {
        &:nth-of-type(1) {
          font-size: 18px;
          opacity: 1;
          margin: 10px 0;
        }
        margin: 2px 0;
        opacity: 0.4;
      }
    }
  }

  .subTitle {
    font-size: 26px;
    line-height: 100px;
    margin-top: 20px;
    span {
      border: 1px solid #000;
      padding: 5px 15px;
      border-radius: 5px;
      background: #222;
      color: #ccc;
    }
  }

  .content2 {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    div {
      width: 25%;
      display: flex;
      box-shadow: 0 0 2px;
      border: 1px solid #555;
      flex-direction: column;
      justify-content: space-between;
      &:nth-of-type(2) {
        margin-left: 20px;
      }
      &:nth-of-type(3) {
        margin-left: 20px;
      }
      &:nth-of-type(4) {
        margin-left: 20px;
      }

      img {
        width: 100%;
        display: block;
        margin: 0 auto;
      }
      p {
        &:nth-of-type(1) {
          font-size: 20px;
          opacity: 1;
          margin: 0 auto;
          text-align: center;
        }
        opacity: 0.5;
        width: 90%;
        margin: 0 auto;
        text-align: justify;
        line-height: 1.4em;
      }
    }
  }

  .content3 {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 95%;
    & > div {
      width: 30%;
      box-shadow: 0 0 2px;
      border: 1px solid #555;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      img {
        width: 100%;
      }

      p.title {
        font-size: 20px;
      }
      p.text {
        width: 90%;
        margin: 0 auto;
        opacity: 0.5;
        font-size: 18px;
        text-align: justify;
      }
      &:nth-of-type(2) {
        width: 35%;
        div {
          &:first-child {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              display: block;
              width: 40%;
            }
          }
        }
      }
    }
  }

  .content4 {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;

    div {
      width: 24.5%;
      box-shadow: 0 0 2px;
      border: 1px solid #555;
      img {
        width: 100%;
      }
      p {
        text-align: center;
        line-height: 1.5em;
      }
    }
  }
  .content5 {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    width: 95%;
    position: relative;

    div {
      margin: 0 5px;
      width: 42%;
      img{
        width: 100%;
        height: 100%;
        box-shadow: 0 0 2px;
        border: 1px solid #555;
      }
    }

    div.floatDiv{
      position: absolute;
      background: #fff;
      width: 580px;
      height: 220px;
      top: 100px;
      opacity: 0.7;
      text-align: center;
      p{
        top: 50px;
        margin: 0 auto;
        display: block;
        position: relative;
        width: 65%;
        &:nth-of-type(1){
          font-size: 18px;
        }
      }
      span{
        border: 2px solid #ff8f00;
        padding: 5px 10px;
        position: absolute;
        display: block;
        left: 250px;
        bottom: 20px;
        color: #ff8f00;
      }

    }
  }
  .content6 {
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 0 auto;

    
    img{
        height: 100%;
        width: 100%;
        border: 1px solid #555;
        box-shadow: 0 0 2px;
      }
    .one {
      margin: 0 5px;
      &:nth-of-type(1){
        width: 52%;
      }
      &:nth-of-type(2){
        width: 32%;
      }
    }

    .two {
     
      &:nth-of-type(1){
         height: 58%;
      }
      &:nth-of-type(2){
         height: 42%;
      }
      
    }
    .three{
      width: 50%;
      height: 95%;
    }
    .position{
      display: flex;
      align-items: flex-end;
    }

    padding-bottom: 30px;
  }
}
</style>

